<template>
  <div class="book-view">
    <div class="book-content">
      <div class="book-row">
        <div class="book-div">
          <img class="book-bg" src="@/assets/images/new-book-bg.png"/>
          <img class="book-img" :src="$store.state.newBook.imgUrl"/>
        </div>

        <div class="book-text">
          <div class="view-label" @click="$goPage('/zxdk')">
            {{ $t('latest') }}<img src="@/assets/images/home-title-label.png"/>
          </div>
          <template v-for="(text, tdx) in $store.state.newBook.muLu">
            <div
              class="text-item"
              :class="{ none: !text.title }"
              v-if="tdx < 3"
              :key="tdx"
            >
              <div class="item-title" v-if="text.title">{{ text.title }}</div>
              <div class="item-content">{{ text.titleP }}</div>
            </div>
          </template>
        </div>
      </div>

      <div
        class="book-btn"
        v-if="$store.state.lang === 'CN'"
      >
        <img
          src="@/assets/images/book-btn01.png"
          alt="全年十二期 每月十号 / 准时发布"
          @click="$goPage('/zxdk')"
        />
        <img src="@/assets/images/book-btn02.png" @click="$goShopping()" alt="马上订阅"/>
      </div>
      <div
        class="book-btn"
        v-if="$store.state.lang === 'EN'"
      >
        <img
          src="@/assets/images/book-btn03.png"
          @click="$goPage('/zxdk')"
          alt="全年十二期 每月十号 / 准时发布"
        />
        <img src="@/assets/images/book-btn04.png" @click="$goShopping()" alt="马上订阅"/>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.book-view {
  margin-top: fh(30vh, pc);
}

.h5 .book-row {
  flex-wrap: wrap !important;
  padding: fw(20vw, h5) !important;

  .book-text {
    margin-top: -80px;

    .view-label {
      margin-bottom: fh(20vh, h5) !important;

      img {
        width: fw(24vw, h5) !important;
        bottom: fh(-8vh, h5) !important;
        right: fw(-6vw, h5) !important;
      }
    }

    .text-item {
      padding-bottom: fh(16vh, h5) !important;

      .item-content {
        margin-bottom: fh(12vh, h5) !important;
      }
    }
  }

  .book-div {
    width: 100% !important;

    .book-bg {
      width: 100% !important;
    }

    .book-img {
      width: 87% !important;
      left: 4vw !important;
    }
  }
}

.book-content {
  background-color: $fh90;
  padding-bottom: fh(40vh, pc);

  .book-btn {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: center;

    img {
      width: fw(180vw, pc);
      display: block;

      &:hover {
        cursor: pointer;
        opacity: 0.7;
      }
    }
  }

  .book-row {
    display: flex;
    width: 100%;
    padding: fh(46vh, pc) fw(20vw, pc);
    color: $sh;

    .book-div {
      position: relative;

      img {
        display: block;
      }

      img.book-bg {
        width: fw(278vw, pc);
      }

      img.book-img {
        width: fw(238vw, pc);
        position: absolute;
        top: fh(12vh, pc);
        left: fw(18vw, pc);
      }
    }

    .book-text {
      padding-left: fw(10vw, pc);

      .view-label {
        color: $zh;
        position: relative;
        display: inline-block;
        font-size: fh(24vh, pc);
        font-weight: 800;
        margin-top: fh(20vh, pc);
        margin-bottom: fh(50vh, pc);

        &:hover {
          cursor: pointer;
          opacity: 0.8;
        }

        img {
          position: absolute;
          bottom: fh(-12vh, pc);
          right: fw(-12vw, pc);
          width: fw(42vw, pc);
        }

        &::after {
          display: none !important;
          content: "";
          position: absolute;
          bottom: fh(-16vh, pc);
          right: fw(-12vw, pc);
          width: fw(30vw, pc);
          height: fh(18vh, pc);
          border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
          border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
        }
      }

      .text-item {
        padding-bottom: fh(20vh, pc);

        &.none {
          margin-top: fh(-30vh, pc);
        }

        .item-title {
          font-size: fh(18vh, pc);
          font-weight: bold;
          padding-bottom: fh(10vh, pc);
        }

        .item-content {
          font-size: fh(16vh, pc);
          line-height: fh(26vh, pc);
          margin-bottom: fh(16vh, pc);
        }
      }
    }
  }
}
</style>
